<script lang="ts" setup>
import { reactive } from 'vue'
import QuickToolbar from '@/components/QuickToolbar/index.vue'
import { Toolbar } from '@/types/table'

const handleAdd = () => {
  console.log('handleAdd')
}
const handleBatchDelete = () => {
  console.log('handleBatchDelete')
}
const handleImport = () => {
  console.log('handleImport')
}
const handleExport = () => {
  console.log('handleExport')
}
const handlePrint = () => {
  console.log('handlePrint')
}
const handleRefresh = () => {
  console.log('handleRefresh')
}
const handleCustomBtn = () => {
  console.log('handleCustomBtn')
}
const tableToolbar = reactive<Toolbar>({
  btns: [
    {
      name: '左边-自定义按钮',
      position: 'left',
      type: 'default',
      click(data: any, done: any) {
        handleCustomBtn(data, done)
      },
    },
    {
      name: '右边-自定义按钮',
      type: 'default',
    },
  ],
})
</script>
<template>
  <quick-toolbar
    :table-toolbar="tableToolbar"
    @on-add="handleAdd"
    @on-batch-delete="handleBatchDelete"
    @on-import="handleImport"
    @on-export="handleExport"
    @on-print="handlePrint"
    @on-refresh="handleRefresh"
  ></quick-toolbar>
</template>
